<template>
	<view class="webView">
		<HeaderBar :title="title" showBack backgroundColor="#F6F6F6" fixed ref="myElement" />
		<view class="content">
			<view class="webview-container " ref="contentView">
				<web-view class="webview-container" :src="url" :webview-styles="webviewStyles"></web-view>
			</view>
			<!-- <web-view class="webview-container" :src="url" :webview-styles="webviewStyles"></web-view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				webviewStyles: {
					progress: {
						color: '#FF3333',
					},
					width: "100%",
					height: "100%",
					position: 'absolute',
					left: 0,
					top: 0,
				},
				url: "",
				title:"",
			}
		},
		onLoad(options) {
			const  chain_id = options.chain_id || '';
			const  url = options.url || '';
			if(chain_id){
				this.url = `${url}&chain_id=${chain_id}`;
			}else{
				this.url = url
			}
			this.title = options.title || '';

		},
		mounted() {
			this.getElementInfo()
		},
		methods: {
			getElementInfo() {
				const query = uni.createSelectorQuery();
				query.select('.webview-container').boundingClientRect((contentRect) => {
					if (contentRect) {
						this.webviewStyles.height = contentRect.height + "px"
						this.webviewStyles.top = contentRect.top + "px"
					}
				}).exec();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.webView {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.content {
			flex: 1;
			/* 让content区域填充剩余空间 */
			position: relative;
			background: red;
			/* 你可以更改这个背景色 */
		}

		.webview-container {
			width: 100%;
			height: 100%;
			/* 确保WebView填充content区域 */
			position: absolute;
			left: 0;
			top: 0;
			background: blue
		}
	}
</style>